<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div class="body">
        <div class="left">
            <div id="main" style="width: 90%;height: 49vh">24年9月消费</div>
            <div id="mychart" style="width: 90%;height: 49vh"></div>
        </div>
       <div style="height: 100vh;" class="right">
            <div class="title">流水记录详细</div>
            <hr class="hr-space-square">
            <el-table
                :data="tableData"
                style="width: 95%;margin: auto">
                <el-table-column
                    prop="time"
                    label="日期"
                    width="160">
                </el-table-column>
                <el-table-column
                    prop="money"
                    label="金额"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="statement"
                    label="说明"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="60">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="70">
                    <template>
                        <el-button @click="handleClick()" type="text"  size="mini">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
       </div>
    </div>
</template>
<script>
    export default {
        name: 'zhexiantu',
        data() {
            return {
                //折现图
                charts: '',
                //数据1
                opinionData1: [],
                //x轴
                mouth:[1,7,14,21,28,30],
                //柱状图
                xData: ["项目", "套餐"], //横坐标
                yData: [], //数据
                tableData:[],
            }
        },
        mounted() {
            //页面加载进行获取数据
            this.getUserData();
            this.initYData();
        },
        methods: {
            //折现图
            getUserData(){
                this.$axios.post(
                    "/waterBill/spend",
                    {
                        mouth:this.mouth 
                    }
                ).then((res) => {
                    //赋值给y轴
                    this.opinionData1 = res.data;
                    //调用函数
                    this.$nextTick(function() {
                        //画div为main的数据
                        this.drawLine('main')
                    })
                }).catch(function(error) {
                    console.log(error);
                });
                // console.log("getUserData",res.data)
            },
            drawLine(id) {
                //初始化数据
                this.charts = this.$echarts.init(document.getElementById("main"))
                this.charts.setOption({
                    title: {
                        text: '24年9月消费统计图'
                    },
                    //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
                    tooltip: {
                        trigger: 'axis'
                    },
                    //所选项
                    legend: {
                        data: ['项目']
                    },
                    //布局样式
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    //下载图片按钮
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    //x轴
                    xAxis: {
                        name: '(天)',
                        type: 'category',
                        boundaryGap: false,
                        data: this.mouth

                    },
                    //y轴
                    yAxis: {
                        name: '花费',
                        type: 'value',
                    },
                    series: [
                        {
                            name: '消费(元)',
                            type: 'line',
                            stack: '总人数',
                            data: this.opinionData1
                        }
                    ]
                });
                // 随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    this.charts.resize();
                });
            },
            initEcharts() {
                // 基本柱状图
                const option = {
                    title: {
                        text: '项目套餐消费金额'
                    },
                    //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        name: '(类型)',
                        data: this.xData
                    },
                    yAxis: {
                        name: '金额(元)',
                    },
                    series: [
                        {
                            type: "bar", //形状为柱状图
                            data: this.yData
                        }
                    ]
                };
                const myChart = this.$echarts.init(document.getElementById("mychart"));
                myChart.setOption(option);
                // 随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },
            initYData(){
                //流水项目信息
                this.$axios.post(
                    "/waterBill/getProjectData",
                    {
                        id:this.$store.state.patientId
                    }
                ).then(res=>{
                    if(res != undefined){
                        var total = 0;
                        for(var i = 0; i< res.data.length;i++){
                            total += Number(res.data[i].money)
                        }
                        this.yData[0] = total
                        this.tableData = res.data

                    }
                }),
                // 流水套餐信息
                this.$axios.post(
                    "/waterBill/getComData",
                    {
                        id:this.$store.state.patientId
                    }
                ).then(res=>{
                    if(res != undefined){
                        var total = 0;
                        for(var i = 0; i< res.data.length;i++){
                            total += Number(res.data[i].money)
                            this.tableData.push(res.data[i])
                        }
                        this.yData[1] = total
                    }
                    this.$nextTick(function() {
                        //画div为main的数据
                        this.initEcharts('mychart')
                    })
                })

            },
            handleClick(){
                this.$router.push("/menu/person/order")
            }

        },

    }
</script>
<style scoped>
    .body{
        display: flex; /* 使用Flexbox */  
        justify-content: space-between; /* 两端对齐，使左右两侧的内容尽量远离 */ 
        /* background-color: #e9e7e7; */
        background-image: url("../../../static/img/person/waterBg.jpg");
        background-size: 100% 100%;
    }
    * {
        width: 100%;
        padding: 0;
        list-style: none;
       
    }
    #main{
        /* margin-top: 2%; */
        /* float: left; */
        box-shadow: 0 0 5px 5px #bababa;
        background-color: white;
    }
    #mychart{
        margin-top: 15px;
        /* float: right; */
        box-shadow: 0 0 5px 5px #bababa;
        background-color: white;

    }
    .left{
        margin: 15px;
    }
    .right{
        margin-right: 5%;
        background-color: white;
        box-shadow: 0 0 5px 5px #bababa;
        margin: 15px;
    }
    .title{
        font-size: 32px;
        font-family: 'STXingkai', Courier, monospace;
        padding: 10px;
    }
    .hr-space-square {
        margin-top: -10px;
        width: 92%;
        border: 0;
        color: #c8c8cc;
        background: linear-gradient(currentColor, currentColor) no-repeat center;
        background-size: calc(100% - 1.5em - 6px) 1px;
        display: flex;
        justify-content: space-between;
    }
    .hr-space-square::before,
    .hr-space-square::after {
        content: '';
        display: block;
        width: .75em; height: .75em;
        transform: rotate(45deg);
        box-sizing: border-box;
        border: 1px solid;
        margin: 3px;
    }
    .el-table{

}
</style>